<template>
  <div class="test">
    <h2 class="n">学生名称：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>当前求和为{{ number }}</h2>
    <button @click="add">点击number++</button>
    <button @click="sendStudentName">将学生名给APP</button>
    <br />
    <button @click="unbind">解绑event事件</button>
    <button @click="death">销毁当前Student组件的实例（vc）</button>
  </div>
</template>

<script>
export default {
  name: "StudentStudent",
  data() {
    return {
      name: "SONG",
      sex: "male",
      number: 0,
    };
  },
  methods: {
    add() {
      console.log("add");
      this.number++;
    },
    sendStudentName() {
      // 触发Student组件上的绑定事件
      this.$emit("event", this.name);
      // this.$emit("demo");
      // this.$emit('click')
    },
    unbind() {
      // this.$off(['event','demo']);//解绑一个自定义事件
      this.$off(); //什么都不写就是所有自定义事件解绑
    },
    death() {
      // 销毁的结果是所有组件的自定义事件都被销毁，原生事件不会
      this.$destroy();
    },
  },
  computed: {

  },
};
</script>

<style lang="less">
.test {
  background-color: antiquewhite;
  .n {
    font-size: 40px;
  }
}
</style>

